<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>comment</title>
		<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="../themes/icon.css">
		<script type="text/javascript" src="../js/jquery.min.js"></script>
	    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>	
		<style type="text/css">
			#operations{
				text-decoration: none;
			}
			#operations:hover{
				text-decoration: underline;
				color:#0466C7;
			}
		</style>
		
	</head>
	<body>
		<div class="easyui-layout" data-options="fit:true">
	        <div data-options="region:'north'" style="height:80px">
	        	<div style="padding:5px 0;">
			        <a href="javascript:void(0)" id="showAllBtn" class="easyui-linkbutton" data-options="iconCls:'icon-add'">显示所有</a>
			        <a href="javascript:void(0)" id="addBtn" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加评论</a>
			    	<a href="javascript:void(0)" id="removesBtn" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除多个</a>	        		
				</div>
				<input class="easyui-searchbox" data-options="prompt:'搜索....',searcher:doSearch" style="width:300px">
			</div>
	        
	        <div data-options="region:'center',title:'详情',iconCls:'icon-ok'">
	            <table id="dg"></table>
				<div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:450px;height:350px;padding:10px">
			        <form id="ff" method="post">
			        	<div style="margin-bottom:20px">
			                <input class="easyui-textbox" name="_id" style="width:200px" data-options="label:'id:',required:true">
			            </div>
			            <div style="margin-bottom:20px">
			                <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'Name:',required:true">
			            </div>			            
			            <div style="margin-bottom:20px">
			                <input class="easyui-textbox" name="comment" style="width:100%;height:60px" data-options="label:'comment:',multiline:true">
			            </div>			            
			        </form>
			        <div style="text-align:center;padding:5px 0">
			            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">提交</a>
			            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">清空</a>
			        </div>
			    </div>
			</div>
	    </div>
		
		
		
		<script type="text/javascript">
			//评论详情表格
			$('#dg').datagrid({
			    url:'http://localhost:3000/comment/list',
			   	method:"post",
			   	pagination:true,
			    columns:[[
			   		{field:'ck',title:'复选',width:70,checkbox:true},
			        {field:'name',title:'姓名',width:70},
			        {field:'comment',title:'评论',width:200},	
			        {field:'date',title:'发布时间',width:200},
			        {field:'operate',title:'操作', width:100,
						formatter: function(value,row,index){
							return "<a id='operations' onclick=deleteData('"+row._id+"')>删除</a> &nbsp;<a id='operations' onclick=upData('"+row._id+"')>修改</a>";
						}
					}
			    ]]
			});

			$("#addBtn").click(function(){
				$('#ff').form('clear');
				$('#dlg').dialog('open');				
			});
			
		    //评论提交和清空按钮
		    function submitForm(){
//		    	console.log($("#ff").form('enableValidation').form('validate'));
	            var postData=$('form').serializeJSON();
	            
	            if(postData._id.length>0){
	            	$.ajax({
		            	type:"put",
		            	url:"http://localhost:3000/comment/data/"+postData._id,
		            	data:postData
		            }).done(function(res){
		            	$.messager.show({
							title:'My Title',
							msg:'修改成功',
							showType:'show',
							style:{
								right:'',
								top:document.body.scrollTop+document.documentElement.scrollTop,
								bottom:''
							}
						});
						$('#dlg').dialog('close');		
	          	 		$('#dg').datagrid('reload');
		            });		 		            
	            }else{
	            	delete postData._id;
	            	$.ajax({
		            	type:"post",
		            	url:"http://localhost:3000/comment/data",
		            	data:postData
		            }).done(function(res){
		            	$.messager.show({
							title:'My Title',
							msg:'添加成功',
							showType:'show',
							style:{
								right:'',
								top:document.body.scrollTop+document.documentElement.scrollTop,
								bottom:''
							}
						});
		            });
		            $('#dlg').dialog('close');		
		            $('#dg').datagrid('reload');
	            }
	        }
	        function clearForm(){
	            $('#ff').form('clear');
	        }              
			
			//删除数据
			function deleteData(id){
				$.messager.confirm('My Title', '确定删除吗?', function(r){
	                if (r){
	                    $.ajax({
			            	type:"delete",
			            	url:"http://localhost:3000/comment/data/"+id
			            }).done(function(res){			            	
			            	$.messager.show({
								title:'My Title',
								msg:'删除成功',
								showType:'show',
								style:{
									right:'',
									top:document.body.scrollTop+document.documentElement.scrollTop,
									bottom:''
								}
							});			            	
							$('#dg').datagrid('reload');
			            }); 
	                }
	            });		
			}
			
			//删除多个数据
			$("#removesBtn").click(function(){
				var rows=$("#dg").datagrid("getSelections");		
				
				if(rows.length>0){
					$.messager.confirm('My Title', '确定删除所选吗?', function(r){
		                if (r){
		                    var ids=[];
							rows.forEach(function(v,i){
								ids.push(v._id);
							});
							
							$.ajax({
								type:"post",
								url:"http://localhost:3000/comment/data/removes",
								data:{
									ids:ids.toString()
								},
								async:true
							}).done(function(){
								$.messager.show({
									title:'My Title',
									msg:'删除成功',
									showType:'show',
									style:{
										right:'',
										top:document.body.scrollTop+document.documentElement.scrollTop,
										bottom:''
									}
								});		
								$('#dg').datagrid('reload');
							}); 
		                }
		            });	
				}else{
					$.messager.show({
						title:'My Title',
						msg:'请先选中选项',
						showType:'show',
						style:{
							right:'',
							top:document.body.scrollTop+document.documentElement.scrollTop,
							bottom:''
						}
					});
				}
			});
		
			//修改数据
			function upData(id){
				$.ajax({
					type:"get",
					url:"http://localhost:3000/comment/data/"+id,
					async:true
				}).done(function(res){
					$("#ff").form("load",res);
					$('#dlg').dialog('open');
				});					
			}
			
			//搜索数据
			function doSearch(value){
	            $('#dg').datagrid({
					queryParams: {
						name:value
					}
				}).datagrid("reload");
	        }
			
			//显示所有
			$("#showAllBtn").click(function(){
				 $('#dg').datagrid({
					queryParams: {
						name:null
					}
				}).datagrid("reload");
			});
	</script>
	</body>
</html>
